import s from './UITools.module.less'
import { FlexAlign, FlexItemType, uiEditorModel } from '../model/ui-editor-model'
import { ItemId } from './ItemId'
import { SelectionTags } from './SelectionTag'
import { NumberInput } from './NumberInput'
import { SpaceTools } from './tools/SpaceTools'
import { BoxTools } from './tools/BoxTools'
import { ToolButton } from './ToolButton'
import { TextTools } from './tools/TextTools'
import { Divider } from './Divider'

export function UITools() {
  const { useOneItem, selectedItemId, markAll } = uiEditorModel.useState
  const item = useOneItem(selectedItemId)

  if (!item) {
    return <div className={s.uiTools}>{selectedItemId} has been deleted!</div>
  }

  let content: JSX.Element | null = null
  switch (item.type) {
    case FlexItemType.box:
      content = <BoxTools boxId={item.referId} />
      break
    case FlexItemType.space:
      content = <SpaceTools item={item} />
      break
    case FlexItemType.text:
      content = <TextTools textId={item.referId} />
      break
  }

  return (
    <div className={s.uiTools}>
      <div className={s.uiToolsInfoLine}>
        <span className={s.uiToolsInfoLineLabel}>Parent:</span>
        <ItemId id={uiEditorModel.getItemParentItem(item.id) || ''} />
      </div>
      <div className={s.uiToolsInfoLine}>
        <span className={s.uiToolsInfoLineLabel}>Item:</span>
        <ItemId id={item.id} />
      </div>
      <div className={s.uiToolsInfoLine}>
        <span className={s.uiToolsInfoLineLabel}>Align:</span>
        <SelectionTags
          selectedId={item.align}
          selection={[FlexAlign.start, FlexAlign.center, FlexAlign.end]}
          getLabel={(v) => FlexAlign[v]}
          onSelect={(v) => {
            uiEditorModel.setItemAlign(item.id, v)
          }}
        />
      </div>
      <div className={s.uiToolsInfoLine}>
        <span className={s.uiToolsInfoLineLabel}>Proportion:</span>
        <NumberInput
          value={item.proportion}
          setValue={(v) => {
            uiEditorModel.setItemProportion(item.id, v)
          }}
        />
      </div>
      <Divider />
      {content}
      <Divider />
      <div className={s.uiToolsButtonGroup}>
        <ToolButton
          onEmit={() => uiEditorModel.moveItemFocus(item.id, -1)}
          label="<[Focus]"
          shortCut={['uparrow', 'leftarrow']}
        />
        <ToolButton
          onEmit={() => uiEditorModel.moveItemFocus(item.id, +1)}
          label="[Focus]>"
          shortCut={['downarrow', 'rightarrow']}
        />
        <ToolButton
          onEmit={() => uiEditorModel.focusItemOut(item.id)}
          label="<]-Focus-[>"
          shortCut={['dash', 'subtract']}
        />
        <ToolButton
          onEmit={() => uiEditorModel.focusItemIn(item.id)}
          label="[>+Focus+<]"
          shortCut={['equalsign', 'add']}
        />
        <ToolButton
          onEmit={() => uiEditorModel.stepMoveItem(item.id, -1)}
          label="<[Move]"
          shortCut={['alt.uparrow', 'alt.leftarrow']}
        />
        <ToolButton
          onEmit={() => uiEditorModel.stepMoveItem(item.id, 1)}
          label="[Move]>"
          shortCut={['alt.downarrow', 'alt.rightarrow']}
        />
        <ToolButton
          onEmit={() => uiEditorModel.toggleMark()}
          label="Mark(M)"
          shortCut="ctrl.M"
          switch={markAll ? 1 : 0}
        />
        <ToolButton
          onEmit={() => uiEditorModel.removeItem(item.id)}
          label="Delete(D)"
          shortCut={['delete', 'ctrl.D']}
        />
      </div>
    </div>
  )
}
